import Vue from 'vue'

const NAME = 'dialogComponent';

export default {
    name: NAME,
    formCreateParser: {
        mergeProp(ctx) {
            const props = ctx.prop.props;
            if (!props.nodeKey) props.nodeKey = 'id';
            if (!props.props) props.props = {
                label: 'title'
            };
        }
    },
    props: {
        formCreateInject: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            dialogVisible:false,
            dynamicFormId:undefined
        }
    },
    methods: {
        closeDialog() {
            this.formCreateInject.prop.props.dialogVisible = false
        },
        showDialog(param){
            console.log('showDialog param from comp')
            console.log(param)
            console.log(this.formCreateInject)
            this.formCreateInject.prop.props.dialogVisible = true
            this.formCreateInject.prop.props.param = param
        },
        /*submit() {
            console.log('dialog.submit()')
            const fApiChild = this.$refs[this.dynamicFormId].getFApi()
            fApiChild.exec('submit1','click')
            this.closeDialog()
        },*/
        handleClick(e, click) {
            const fApi = this.formCreateInject.api
            const fApiChild = this.$refs[this.dynamicFormId].getFApi()
            e && e.stopPropagation && e.stopPropagation()
            click && click(fApi,fApiChild,this)
        }
    },
    mounted(){
        Vue.component('DynamicForm', function (resolve) {
            // 这个特殊的 `require` 语法将会告诉 webpack
            // 自动将你的构建代码切割成多个包，这些包
            // 会通过 Ajax 请求加载
            require(['@/views/flow/form/template/tmpt-dynamic-form'], resolve)
        })
    },
    render(h) {
        this.dialogVisible = this.formCreateInject.prop.props.dialogVisible
        this.dynamicFormId = this.formCreateInject.prop.props.dynamicFormId
        const param = this.formCreateInject.prop.props.param
        const buttonList = this.formCreateInject.prop.props.buttonList
        return (
            <el-dialog
                title="提示"
                visible={this.dialogVisible}
                width="50%"
                append-to-body
                before-close={this.closeDialog}
            >
                <DynamicForm ref={this.dynamicFormId+''} dynamicFormId={this.dynamicFormId+''} param={param}/>
                <span slot="footer" class="dialog-footer">
                    {
                        buttonList.map(btn=>{
                            return(
                                <el-button
                                    {...{ on: { click: (e) => this.handleClick(e, btn.click) }}}
                                >{btn.name}</el-button>
                            )
                        })
                    }
                    {/*<el-button on-click={this.closeDialog}>取 消</el-button>
                    <el-button on-click={this.submit}>确 定</el-button>*/}
                </span>
            </el-dialog>
        )
    }
}
